<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/webcon/resources/'}"/>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/plugins/jeditable/jquery.jeditable.js"></script>

    <link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">
    <script src="js/plugins/dataTables/datatables.min.js"></script>

    <!-- 数字选择插件-->
    <script type="text/javascript" src="widget/number/numberInput.js"></script>
    <script type="text/javascript" src="myjs/number.js"></script>

    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>

    <style>
        .btn-large-dim {
            width: 80px;
            height: 80px;
            font-size: 10px;
            margin-bottom: 0px;
        }
    </style>

    <script th:inline="javascript">
        $(document).ready(function () {

            //动态计算高度
            autoHeight();

            $('.dataTables-example').DataTable({
                dom: '<"html5buttons"B>lTfgitp',
                "ordering": false,
                buttons: [
                    {extend: 'copy'},
                    {extend: 'csv'},
                    {extend: 'excel', title: 'ExampleFile'},
                    {extend: 'pdf', title: 'ExampleFile'},

                    {
                        extend: 'print',
                        customize: function (win) {
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                .addClass('compact')
                                .css('font-size', 'inherit');
                        }
                    }
                ]

            });

            var oTable = $('#editable').DataTable();

            oTable.$('td').editable('../example_ajax.php', {
                "callback": function (sValue, y) {
                    var aPos = oTable.fnGetPosition(this);
                    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                },
                "submitdata": function (value, settings) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition(this)[2]
                    };
                },

                "width": "90%",
                "height": "100%"
            });
        });


        //点击行
        var uid;
        function click_tr(userid, ele){

            $("tbody tr:even").css("background-color", "#f9f9f9");
            $("tbody tr:odd").css("background-color", "#ffffff");

            ele.style.backgroundColor = "#dddddd";
            uid = userid;
        }

        var monitored = [[${listenStatus.containsKey('monitored') ? listenStatus.monitored : null}]];
        var monitor= [[${listenStatus.containsKey('monitor') ? listenStatus.monitor : null}]];

        //设置被监听终端
        function byListener(){

            var checkeds = $("[name='checkboxs']:checked");

            if(checkeds.length <= 0){
                alert("请至少选择一个终端！");
                return;
            }

            if(checkeds.length > 1){
                alert("请最多选择一个终端！");
                return;
            }

            uid = $(checkeds[0]).val();

            $.post([[${#request.getContextPath()}]] + "/web/clients/byListener",{"userid":uid},function(data){
                location.reload();
            });
        }

        //设置监听终端
        function listener(){

            var checkeds = $("[name='checkboxs']:checked");

            if(checkeds.length <= 0){
                alert("请至少选择一个终端！");
                return;
            }

            if(checkeds.length > 1){
                alert("请最多选择一个终端！");
                return;
            }
            uid = $(checkeds[0]).val();

            if(!monitored){
                alert("请先选择一个被监听终端！");
                return;
            }

            if(monitored == uid){
                alert("被监听终端不能再设置成监听终端");
                return;
            }

            $.post([[${#request.getContextPath()}]] + "/web/clients/listener",{"userid":uid},function(data){
                location.reload();
            });
        }

        //删除终端
        function deleteClient(){
            var checkeds = $("[name='client_checkbox']:checked");

            if(checkeds.length <= 0){
                alert("请至少选择一个终端！");
                return;
            }

            if(checkeds.length > 1){
                alert("请最多选择一个终端！");
                return;
            }
            uid = $(checkeds[0]).val();

            myajax({
                type: "POST",
                url: [[${#request.getContextPath()}]] + "/client/deleteByUid",
                data: {"userid":uid},
                success: function(data){
                    location.reload();
                }
            });
        }

        //全选
        function checked_all(flag){
            var checkboxs = document.getElementsByName("client_checkbox");
            for(var i = 0; i < checkboxs.length; i++){
                checkboxs[i].checked = flag;
            }
        }

        //显示音量调节弹框
        function show_volume_model(){

            var checkeds = $("[name='client_checkbox']:checked");

            if(checkeds.length <= 0){
                alert("请至少选择一个终端！");
                return;
            } else if(checkeds.length == 1){
                var volumes = $("#client_volume_" + checkeds.val()).html();
                $("#volume input").val(volumes);
            } else {
                $("#volume input").val(10);
            }

            $("#myModal3").modal({backdrop: 'static', keyboard: false});
        }

        //修改音量
        function updateVolume(){
            var checkeds = $("[name='client_checkbox']:checked");

            //获得终端
            var uids = [];

            for(var i = 0; i < checkeds.length; i++){
                uids.push(checkeds[i].value);
            }

            //获得音量
            var volume = $("#volume input").val();

            var r = /^\+?[1-9][0-9]*$/;　　//正整数
            var flag=r.test(volume);
            if(!flag){
                alert("音量必须为正整数！");
                return;
            }

            if(volume < 0 || volume > 15){
                alert("音量范围必须在是0~15之内");
                return;
            }

            myajax({
                type: "POST",
                url: [[${#request.getContextPath()}]] + "/client/updateVolume",
                data: {"uids":uids, "volume":volume},
                success: function(data){
                    $("#myModal3").modal("hide");
                    location.reload();
                }
            });
        }
    </script>

</head>
<body>
<div class="row border-bottom white-bg dashboard-header myheader" style="padding: 10px 10px 10px 10px">

   <!-- <button class="btn btn-primary dim btn-large-dim" type="button" onclick="listener();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="img/1.png"/><br/>
        监听终端
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="byListener();">
        被监听终端
    </button>-->
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="show_volume_model();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/client_volume.png"/><br/>
        音量调节
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="deleteClient();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/client_delete.png"/><br/>
        删除终端
    </button>
    <!--<button class="btn btn-primary dim btn-large-dim" type="button">
        双向对讲
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button">
        语音帮助
    </button>-->

</div>
    <div class="animated fadeInRight">
        <div class="row">
            <div id="col-lg-12">
                <div class="ibox float-e-margins">
                <div class="ibox-content h_1">

                    <div class="table-responsive" style="height: 730px; overflow:scroll; overflow-y: auto; overflow-x: auto;">
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <!--<th>Rendering engine</th>
                                <th>Browser</th>
                                <th>Platform(s)</th>
                                <th>Engine version</th>
                                <th>CSS grade</th>-->

                                <th>全选 &nbsp;&nbsp; <input type="checkbox" onclick="checked_all(this.checked);"/></th>
                                <th>状态</th>
                                <th>终端ID</th>
                                <th>终端名称</th>
                                <th>MAC地址</th>
                                <th>IP地址</th>
                                <th>音量</th>
                                <th>任务状态</th>
                                <th>监听状态</th>
                                <th>软件版本</th>
                                <th>固件版本</th>
                                <th>音源</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--<tr th:onclick="|click_tr(${client.userid}, this);|" th:switch="${4 - #strings.length(client.userid)}" th:each="client : ${clients}" class="gradeX">-->
                            <tr th:id="|tr_client_${client.userid}|" th:uid="${client.userid}" th:switch="${4 - #strings.length(client.userid)}" th:each="client : ${clients}" class="gradeX">

                                <th><input type="checkbox" name="client_checkbox" th:value="${client.userid}"/></th>
                                <th>
                                    <img style="width: 20px; height: 20px" th:src="${client.status == 1 ? 'img/on.png' : 'img/off.png'}"/>
                                </th>
                                <th th:case="${0}" th:text="${client.userid}">终端ID</th>
                                <th th:case="${1}" th:text="${'0' + client.userid}">终端ID</th>
                                <th th:case="${2}" th:text="${'00' + client.userid}">终端ID</th>
                                <th th:case="${3}" th:text="${'000' + client.userid}">终端ID</th>
                                <th th:text="${client.terminalname}">终端名称</th>
                                <th th:text="${client.mac}">MAC地址</th>
                                <th th:text="${client.ip}">IP地址</th>
                                <th th:id="|client_volume_${client.userid}|" th:text="${client.volume}">音量</th>
                                <!--<th th:id="|client_status_${client.userid}|" th:switch="${client.status}">
                                   <span th:case="0" th:text="任务空闲"></span>
                                   <span th:case="1" th:text="执行中"></span>
                                   <span th:case="2" th:text="任务停止"></span>
                                   <span th:case="3" th:text="等待中"></span>
                                </th>-->
                                <th th:id="|client_status_${client.userid}|">任务空闲</th>
                                <th th:if="${listenStatus.containsKey('monitored') && client.userid == listenStatus.monitored}">被监听终端</th>
                               <!-- <th th:unless="${listenStatus.containsKey('monitored') && client.userid == listenStatus.monitored}"></th>-->
                                <th th:if="${listenStatus.containsKey('monitor') && client.userid == listenStatus.monitor}">监听终端</th>
                                <!--<th th:unless="${listenStatus.containsKey('monitor') && client.userid == listenStatus.monitor}"></th>-->
                                <th th:unless="${(listenStatus.containsKey('monitored') && client.userid == listenStatus.monitored) || (listenStatus.containsKey('monitor') && client.userid == listenStatus.monitor)}"></th>
                                <th th:text="${client.updateStatus}"></th>
                                <th th:text="${client.productsModel}"></th>
                                <th th:id="|client_mp3_${client.userid}|"></th>
                            </tr>


                            </tbody>
                            <tfoot>
                            <!--<tr>
                                <th>Rendering engine</th>
                                <th>Browser</th>
                                <th>Platform(s)</th>
                                <th>Engine version</th>
                                <th>CSS grade</th>
                            </tr>-->
                            </tfoot>
                        </table>
                    </div>

                </div>
            </div>
            </div>
        </div>
    </div>
</body>


<!-- 弹出框 -->
<div class="modal inmodal" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <!-- animated bounceInRight -->
        <!-- animated flipInY -->
        <div class="modal-content animated flipInY">
            <!-- 头部信息 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">音量调节</h4>
            </div>
            <!-- 内容部分 -->
            <div class="modal-body" style="padding: 0px">
                <div class="row" style="margin: 0px;">
                    <div class="col-lg-12" style="padding: 4px;">
                        <div class="ibox float-e-margins" style="margin-bottom: 0px">
                            <div class="ibox-content" style="position: relative; height: 200px; text-align: center;">
                                <div id="volume" class="mynumber" style="margin-bottom: 10px;"></div>
                                <span style="color: #ff0000;">*音量范围在0~15之间</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="modal-footer">
                <button type="button" id="submitBtn2" class="btn btn-primary" onclick="updateVolume();">提交</button>
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</html>